<template>
	<view class="goods-list" :class="isShow ? 'act' : ''">
		<view class="mask" v-if="isShow">
			<view class="content">
				<view class="title">
					<view>
						<image :src="data.pic" mode=""></image>
					</view>
					<view>
						<view>单人沙发</view>
						<view>库存数量:</view>
					</view>
					<view @tap="isShow=!isShow">
						<image src="../../../static/icons/x.png" mode=""></image>
					</view>
				</view>
				<view class="select">
					<view class="title">商品选择</view>
					<view class="list">
						<view class="item" :class="actId == el.id ? 'act' : ''" v-for="el in skuList" :key="el.id" @tap="addClass(el.id)">
							<view class="son" v-for="(el2,index) in el.spData" :key="index">
								{{el2.key}}: {{el2.value}}
							</view>
						</view>
					</view>
				</view>
				<view class="serve">
					<view class="title">特色服务</view>
					<view class="list">
						<view class="item">送货上门</view>
						<view class="item">上门安装</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="buy">
					<view class="title">购买数量</view>
					<view class="list">
						<view @tap="remo" class="item">-</view>
						<view class="item">{{num}}</view>
						<view @tap="num++" class="item">+</view>
					</view>
				</view>
				<view class="submit" @tap="addGoodsCart">确定</view>
			</view>
		</view>
		<view class="header">
			<image src="../../../static/icons/arrl.png" mode=""@tap="back"></image>
			<text>{{data.name}}</text>
		</view>
		<swiper class="detail-swiper" :autoplay="true" indicator-dots="true">
            <swiper-item class="detail-item" v-for="item in data.skuList" :key="item.id">
                <image :src="item.pic" mode=""></image>
            </swiper-item>
        </swiper>
		<view class="info">
			<view class="head">
				<view class="left">
					<text>¥</text>
					<text>{{data.price}}</text>
					<text>.00</text>
				</view>
				<view class="right">
					没有促销使用原价
				</view>
			</view>
			<view class="cname">{{data.name}}</view>
			<view class="introduce">{{data.description}}</view>
			<view class="collect" @tap="addLocal">
				<text :class="localShow ? 'active' : ''" class="iconfont icon-shoucang"></text>
			</view>
		</view>
		<view class="product" v-html="data.detailMobileHtml"></view>
		<!-- 购物车 -->
		<view class="cart">
			<view class="ico">
				<image src="../../../static/icons/kf.png" mode=""></image>
			</view>
			<view class="ti">
				<view @tap="tosCart">添加到购物车</view>
				<view @tap="tosBuy">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { productDetail,addCart } from "../../../api/home/cate.js"
	import { addPreOrder } from "../../../api/home/order.js"
	export default {
		data() {
			return {
				data:{},
				isShow:false,
				actId:"",
				num:1,
				localList:[],
				localShow:false,
				buyShow:true
			};
		},
		onLoad(options) {
			console.log(options)
			var id = options.id
			productDetail(id).then(res=>{
				console.log(res)
				
				this.data = res.data.product
				this.data.detailMobileHtml = this.data.detailMobileHtml.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
				console.log(this.data)
				this.localList = uni.getStorageSync("localList")
				 var bol2 = this.localList.some(el=>el.id == this.data.id)
				 if (bol2) {
					this.localShow = bol2 
				 }
			})
			
			
		},
		methods:{
			back() {
				uni.switchTab({
					url:"/pages/home/home"
				})
			},
			addClass(id) {
				this.actId = id
			},
			addGoodsCart() {
				if (this.buyShow) {
					addCart({
						productId:this.data.id,
						productSkuId:this.actId,
						quantity:this.num
					}).then(res=>{
						console.log(res)
						uni.showToast({
							title:"添加成功",
							icon:"success"
						})
					})
				} else {
					addPreOrder({
						orderItemList:[{
							productId:this.data.id,
							productSkuId:this.actId,
							productQuantity:this.num
						}]
					}).then(res=>{
						console.log(res)
						if (res.success) {
							uni.navigateTo({
								url:`/pages/home/buy/buy?id=${res.data.orderId}`
							})
						}
					})
					
					// console.log("我是立即购买")
				}
			},
			remo() {
				if (this.num > 1) {
					this.num--
				}
			},
			addLocal() {
				this.localList = uni.getStorageSync("localList")
				if (this.localList) {
					console.log(666)
					var bol = this.localList.every(el=>el.id != this.data.id)
					if (bol) {
						this.localList.push(this.data)
						uni.setStorageSync("localList",this.localList)
						this.localShow = bol
					} else {
						var index = this.localList.findIndex(el=>el.id == this.data.id)
						this.localList.splice(index,1)
						uni.setStorageSync("localList",this.localList)
						this.localShow = bol
					}
				} else {
					console.log(8888)
					this.localList = []
					this.localList.push(this.data)
					uni.setStorageSync("localList",this.localList)
					this.localShow = true
				}
			},
			tosCart() {
				this.isShow = !this.isShow
				this.buyShow = true
			},
			tosBuy() {
				this.isShow = !this.isShow
				this.buyShow = false
			}
		},
		computed:{
			skuList() {
				// return this.data.skuList.map(el=>{
				// 	el.spData = JSON.parse(el.spData)
				// 	return el
				// })
				var arr = this.data.skuList.map(el=>{
					el.spData = JSON.parse(el.spData)
					return el
				})
				this.actId = arr[0].id
				return arr
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
		background-color: #f1ece7;
		color: #3E3E3E;
}
.goods-list {
	&.act {
		height: 100vh;
		overflow: hidden;
	}
}
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,.5);
	z-index: 99;
	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 628rpx;
		height: 926rpx;
		box-sizing: border-box;
		padding: 56rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx;
		.title {
			display: flex;
			position: relative;
			>view {
				&:nth-child(1) {
					position: absolute;
					top: -112rpx;
					left: 0;
					width: 192rpx;
					height: 192rpx;
					border-radius: 10rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				&:nth-child(2) {
					margin-left: 228rpx;
					margin-top: 28rpx;
					>view {
						&:nth-child(1) {
							font-size: 28rpx;
							color: #3E3E3E;
							font-weight: 700;
						}
						&:nth-child(2) {
							font-size: 24rpx;
							color: #b0b0b0;
						}
					}
				}
				&:nth-child(3) {
					position: absolute;
					right: 0;
					top: 0;
					width: 42rpx;
					height: 42rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.select {
			.title {
				font-size: 28rpx;
				color: #3E3E3E;
				font-weight: 700;
				margin-top: 30rpx;
				letter-spacing: 4rpx;
				line-height: 40rpx;
			}
			.list {
				font-size: 26rpx;
				color: #3E3E3E;
				width: 100%;
				height: 170rpx;
				overflow-y: auto;
				display: flex;
				flex-direction: column;
				.item {
					display: flex;
					box-sizing: border-box;
					width: 480rpx;
					height: 60rpx;
					padding-left: 10rpx;
					border: 2px solid transparent;
					margin: 10rpx;
					border-radius: 20rpx;
					background-color: #f2f4f3;
					line-height: 52rpx;
					&.act {
						border-color: #000;
					}
				}
			}
		}
		.serve {
			.title {
				font-size: 28rpx;
				color: #3E3E3E;
				font-weight: 700;
				margin-top: 30rpx;
				letter-spacing: 4rpx;
				line-height: 40rpx;
			}
			.list {
				font-size: 26rpx;
				color: #3E3E3E;
				width: 100%;
				.item {
					box-sizing: border-box;
					width: 480rpx;
					height: 60rpx;
					margin: 10rpx;
					border-radius: 20rpx;
					background-color: #f2f4f3;
					line-height: 52rpx;
					text-indent: 1em;
				}
			}
		}
		.line {
			width: 530rpx;
			height: 2rpx;
			background-color: #f2f4f3;
			margin: 18px auto;
		}
		.buy {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title {
				font-size: 28rpx;
				color: #3E3E3E;
				font-weight: 700;
				letter-spacing: 4rpx;
				line-height: 40rpx;
			}
			.list {
				display: flex;
				.item {
					width: 60rpx;
					height: 60rpx;
					margin: 0 6rpx;
					border-radius: 50%;
					background-color: #f1ece7;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					color: #000;
					&:nth-child(2) {
						width: 90rpx;
						border-radius: 30rpx;
					}
				}
			}
		}
		.submit {
			width: 208rpx;
			height: 80rpx;
			border-radius: 28rpx;
			margin: 48rpx auto;
			background-color: #354e44;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
	}
}
.header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #354e44;
	height: 60rpx;
	padding: 14rpx 6rpx;
	image {
		position: absolute;
		left: 8rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
	}
	text {
		width: 470rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bolder;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		line-height: 60rpx;
	}
}

.detail-swiper {
	height:634rpx;
	.detail-item{
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.info {
	position: relative;
	padding: 70rpx 68rpx;
	.collect {
		position: absolute;
		top: -50rpx;
		right: 100rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #354e44;
		border-radius: 50%;
		text-align: center;
		text {
			font-size: 60rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			&.active {
				color: #f00;
			}
		}
	}
	.head {
		display: flex;
		.left {
			text {
				font-size: 32rpx;
				color: #f2270c;
				&:nth-child(2) {
					font-size: 60rpx;
				}
			}
		}
		.right {
			position: relative;
			top: 40rpx;
			padding: 0 12rpx;
			margin: 0 12rpx;
			border: 1px solid #ff8373;
			border-radius: 5rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			background-color: #f2270c;
			line-height: normal;
			height: 30rpx;
			&::after {
				content: "";
				width: 6rpx;
				height: 12rpx;
				background-color: #FFFFFF;
				border-radius: 50%;
				position: absolute;
				left: -5rpx;
				top: 50%;
				transform: translateY(-50%);
			}
			&::before {
				content: "";
				width: 6rpx;
				height: 12rpx;
				background-color: #FFFFFF;
				border-radius: 50%;
				position: absolute;
				right: -5rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	.cname {
		font-size: 32rpx;
		color: #262626;
		font-weight: bolder;
	}
	.introduce {
		padding-top: 36rpx;
		font-size: 24rpx;
		color: #666;
	}
}
.product {
	padding: 68rpx;
}
.cart {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120rpx;
	padding: 0 60rpx;
	background-color: #FFFFFF;
	view {
		width: 238rpx;
		height: 80rpx;
		font-size: 15px;
		text-align: center;
		line-height: 80rpx;
	}
	.ico {
		width: 40rpx;
		height: 40rpx;
		// margin-right: 106rpx;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.ti {
		display: flex;
		width: fit-content;
		view {
			&:nth-child(1) {
				color: #8f8f94;
				background-color: #e2e2e2;
			}
			&:nth-child(2) {
				color: #FFFFFF;
				background-color: #354e44;
			}
		}
	}
}
</style>